<template>
  <div>
    <vxe-toolbar id="shipmentManageListId">
      <template v-slot:buttons>
        <el-button @click="funcFilter">查询</el-button>
        <el-button @click="save">确认</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="550"
      :show-footer="true"
      :loading="loading"
      :data="tableData"
      remote-sort
      @sort-change="sortList"
      :edit-config="{trigger: 'click', mode: 'cell'}"
    >
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="userName"
          show-header-overflow
          show-overflow
          title="入驻商名称"
          min-width="130"
          sortable
        />
        <template v-slot:header>
          <el-input v-model="listQuery.shipmentName" placeholder="入驻商名称" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="phone"
          show-header-overflow
          show-overflow
          title="手机号"
          min-width="130"
          sortable
        />
        <template v-slot:header>
          <el-input v-model="listQuery.phone" placeholder="手机号" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="row.useOms" title="使用OMS"  :edit-render="{ name: '$select', options: [] }" width="270">
          <template v-slot="{ row }">
            <el-select v-model="row.useOms" placeholder="请选择使用OMS" style="width:100%" >
              <el-option
                v-for="item in commonStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </vxe-table-column>
      </vxe-table-column>

    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
  import Vue from "vue";
  import "xe-utils";
  import VXETable from "vxe-table";
  import "vxe-table/lib/index.css";
  import XEUtils from "xe-utils";
  import VXEUtils from "vxe-utils";

  Vue.use(VXETable, VXEUtils, XEUtils, {mounts: ["cookie"]});
  import {chooseShipment,queryShipmentList} from "@/api/basicInfo";

  export default {
    name: "ShipmentList",
    data() {
      return {
        branch: this.$store.getters.branch,
        gmtCreatedRange: "",
        gmtAuthRange: "",
        warehouseCode:'',
        loading: false,
        tableData: [],
        listQuery: {
          warehouseCode: "",
          shipmentName: "",
          phone: "",
          pageNum: 1,
          pageSize: 10,
          sortField: "",
          sortType: "",
          total: 0
        },
        Pagingconf: [],
        sumObject: {
          freezingAmount: 0,
          amount: 0
        },
        // 审核状态
        authStatusOptions: [
          {label: "未审核", value: 0, color: "gray"},
          {label: "审核中", value: 1, color: "#0000ff"},
          {label: "审核未通过", value: 2, color: "#ff0000"},
          {label: "审核通过", value: 3, color: "#00bd93"}
        ],
        // 通用是否状态
        commonStatusOptions: [
          {label: "否", value: 0},
          {label: "是", value: 1}
        ]
      };
    },
    created() {
    },
    methods: {
      //启用
      save() {
        let selectRecords = this.$refs.xTable.getCheckboxRecords()
        let arr = [], useOms = []
        selectRecords.forEach(i => {
          arr.push(i.partyCode)
          useOms.push(i.useOms)
        })
        arr = arr.join(",");
        if (arr.length != 0) {
          this.$confirm('确认选择的入驻商吗？').then(_ => {
            this.loading = true
            chooseShipment(arr, useOms.join(","), this.warehouseCode).then(response => {
              this.$message({message: response.msg, type: 'success'})
              this.$emit('fatherChooseMethod')
              this.loading = false
            })
          })
        } else {
          this.$message('没有选择的数据！')
        }

      },


      findList() {
        this.loading = true;
        this.listQuery.warehouseCode = this.warehouseCode;
        return new Promise(resolve => {
          queryShipmentList(this.listQuery).then(response => {
            let records = response.data.records;
            records.forEach(item => {
              item.useOms = 0
            });
            this.tableData = records;
            this.listQuery.total = response.data.total;
            this.Pagingconf = [20, 30, 50, 100, response.data.total];
            this.sumObject = response.data.sumObject;
            this.loading = false;
            resolve()
          });
        })
      },

      // 排序
      sortList({column, property, order}) {
        this.listQuery.sortField = property;
        this.listQuery.sortType = order;
        this.findList();
      },
      // 查询
      funcFilter() {
        this.listQuery.pageNum = 1
        this.findList()
      },


      // 分页handle
      handlePageChange({currentPage, pageSize}) {
        this.listQuery.pageNum = currentPage;
        this.listQuery.pageSize = pageSize;
        this.findList();
      },

    }
  };
</script>

<style>


</style>
